<template>
  <div class="page gray-page wish-page">
    <nav-bar :title="title"></nav-bar>
    <div class="pt88">
      <van-form
        validate-trigger="onSubmit"
        :show-error="false"
        ref="from"
        :label-width="200"
        @failed="onFailed"
        @submit="onSubmit"
      >
        <van-cell size="large" title="心愿填写" :border="false" />
        <van-field
          class="van-field__value--textarea"
          name="wish"
          v-model="formParams.appPartyWish"
          rows="12"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请详细描述您的心愿"
          show-word-limit
          :border="false"
          :rules="rules.appPartyWish"
        />
        <div style="margin: 32px 16px">
          <van-row :gutter="23">
            <van-col span="12">
              <van-button block native-type="button" @click="onClear">清空</van-button>
            </van-col>
            <van-col span="12">
              <van-button block type="danger" native-type="submit" :disabled="buttonDisabled">提交</van-button>
            </van-col>
          </van-row>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import partyBuilding from '@/api/partyBuilding'
export default {
  data() {
    return {
      title: '党员心愿',
      buttonDisabled: false,
      formParams: {
        appPartyWish: ''
      },
      rules: {
        appPartyWish: [
          { required: true, message: '请输入您的心愿' },
          {
            validator: val => {
              return val.length >= 5
            },
            message: '您的心愿不得少于5个字'
          }
        ]
      }
    }
  },
  methods: {
    onClear() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空所有内容',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.formParams.appPartyWish = ''
        })
    },
    // 校验失败
    onFailed(errorInfo) {
      this.$refs.from.scrollToField(errorInfo.errors[0].name)
    },
    // 提交
    onSubmit() {
      partyBuilding.My.save(this.formParams)
        .then(res => {
          const { status, message } = res.data
          if (status === 0) {
            this.$toast.success('提交成功')
            this.$router.go(-1)
          } else {
            this.$toast.fail(message)
          }
          this.buttonDisabled = false
        })
        .catch(() => {
          this.buttonDisabled = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/partyBuilding/My/index.less';
</style>
